@import 'utils/scss_variables.module.scss';

.ps-field-wrapper.ps-multiselect-field-wrapper.is-async {
    .selector-wrapper {
        position: relative;

        .multi-select__control {
            border-color: $color-grey-light;
            border-radius: 2px;
            
            .multi-select__value-container.multi-select__value-container--has-value {
                &:active,
                &:hover,
                &:focus-within {
                    > :not(.multi-select__multi-value) {
                        display: block;
                    }
                }
                > :not(.multi-select__multi-value) {
                    display: none;
                }
            }
            .multi-select__multi-value .multi-select__multi-value__label {
                font-weight: 600;
            }
            &.multi-select__control--is-disabled {
                background-color: $color-grey-off-white;
                border: 1px solid $color-grey-light;
        
                .multi-select__placeholder,
                .multi-select__indicators {
                    display: none;
                }
                .multi-select__multi-value {
                    background-color: $color-grey;
                }
            }
            &.multi-select__control--is-focused {
                box-shadow: 0px 0px 5px rgba(2, 188, 234, 0.5);
            } 
        }
    }
    
}